<template>
	<view class="order-list" :class="themeName">
		<!-- Tabs -->
		<navbar title="业务员列表"></navbar>

		<!-- Order Lists -->
		<view class="order-item">
			<mescroll-uni ref="mescrollRef" :fixed="false" :up="{
				  auto: false,
				  noMoreSize: 3,
				  empty: {
				  	icon: $getImageUri('resource/image/shopapi/uniapp/empty/order.png'),
				  	tip: $zhTran('暂无业务员~'),
				  	fixed: true
				  }
			  }" :down="{ auto: false }" @init="mescrollInit" @down="downCallback" @up="upCallback">
				<view class="order-contain">
					<view class="order" v-for="item,idx in salemanList" :key="idx ">
						<!-- Order Header -->
						<view class="order-header flex row-between">
							<view class="flex">
								<image class="avatar" :src="item.user_info.avatar" mode="widthFix" />
								<view class="m-l-30">
									<view class="nr m-r-20 bold">{{$zhTran('当前用户')}}：{{item.user_info.nickname}}</view>
									<view class="xs m-t-10 muted">{{$zhTran('联系电话')}}：{{item.user_info.mobile}}</view>
								</view>
							</view>
							<u-icon name="minus-circle-fill" size="48" color="rgba(212, 48, 48, 1)"
								@click="removeSale(item)" v-if="item.user_id != user_id && is_leader == 1" />
						</view>

						<view class="order-main">
							<view class="box">{{$zhTran('业务员客户数量')}}：<text>{{item.user_count}}</text></view>
							<view class="box">{{$zhTran('业务员订单数量')}}：<text>{{item.order_count}}</text></view>
							<view class="box">{{$zhTran('业务员订单金额')}}：<text>{{item.order_amount}}</text></view>
							<view class="box">{{$zhTran('业务员订单收益')}}：<text>{{item.order_profit}}</text></view>
						</view>
					</view>
				</view>
			</mescroll-uni>
		</view>

		<u-popup v-model="showVisible" mode="bottom" border-radius="14" :closeable="false"
			:safe-area-inset-bottom="true" @close="closePopup">
			<view class="saleman">
				<view class="saleman-header">
					<text>{{$zhTran(mode == 'add'?'新增业务员':'离职转接')}}</text>
					<u-icon name="close" color="#666666" @tap="showVisible = false" />
				</view>

				<view class="saleman-main">
					<u-form :model="formModel" ref="uForm" :error-type="['message']">
						<u-form-item :label-width="140" :label="$zhTran('手机号码')" prop="mobile" v-if="mode == 'add'">
							<u-input v-model="formModel.mobile" :placeholder="$zhTran('请填写业务员手机号')" type="text"
								maxlength="11" />
						</u-form-item>
						<u-form-item :label-width="150" :label="$zhTran('离职业务员')" v-if="mode == 'del'">
							<view class="p-l-15 sm muted">{{formModel.del_saleman}}</view>
						</u-form-item>
						<u-form-item :label-width="150" :label="$zhTran('转接业务员')" prop="csppl_sale"
							v-if="mode == 'del'">
							<view class="flex row-between p-l-15" @click="chooseSaleman">
								<view class="sm muted">{{formModel.csppl_saleman}}</view>
								<u-icon name="arrow-right" color="#999999" />
							</view>
						</u-form-item>
					</u-form>
				</view>

				<view class="saleman-footer flex-1 flex row-around">
					<button hover-class="none" class="btn btn--cancel" size="md"
						@tap="closePopup">{{$zhTran("取消")}}</button>
					<button hover-class="none" class="btn btn--confirm add" size="md" @tap="addSaleman"
						v-if="mode=='add'">{{$zhTran('确定')}}</button>
					<button hover-class="none" class="btn btn--confirm del" size="md" @tap="delSaleman"
						v-else>{{$zhTran('确定')}}</button>
				</view>
			</view>
		</u-popup>

		<view class="functions" v-if="is_leader == 1">
			<u-icon name="plus-circle-fill" size="90" color="rgba(64, 115, 250, 1)" class="btn-add" @click="newSaleman">
			</u-icon>
		</view>

	</view>
</template>


<script>
	import {
		apiCheckSalemanExist,
		apiCitySupplierSalemanAdd,
		apiCitySupplierSalemanDel,
		apiCitySupplierSalemanAll,
		apiCitySupplierSalemanList
	} from '@/api/citysupplier'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	export default {
		name: 'OrderList',
		mixins: [MescrollMixin],

		data() {
			return {
				csppl_id: '',
				user_id: '',
				is_leader: 0,
				salemanList: [],
				showVisible: false,
				formModel: {
					mobile: '',
					del_sale: '',
					del_saleman: '',
					csppl_sale: '',
					csppl_saleman: this.$zhTran('修改客户所属业务员')
				},
				mode: 'add',
				rules: {
					mobile: [{
						asyncValidator: (rule, value, callback) => {

							this.mode == 'del' && callback();

							value == '' && callback(new Error(this.$zhTran('请填写手机号')));

							value.length != 11 && callback(new Error(this.$zhTran('请填写有效手机号')));

							apiCheckSalemanExist({
								mobile: value
							}).then(res => {
								if (res.count > 0) {
									callback(new Error(this.$zhTran('当前号码已成为业务员')));
								} else if (res.count == -1) {
									callback(new Error(this.$zhTran('当前号码无关联用户')));
								} else {
									callback();
								}
							})
						},
						trigger: ['blur', 'change'],
					}],
					csppl_sale: [{
						asyncValidator: (rule, value, callback) => {

							this.mode == 'add' && callback();

							value == '' && callback(new Error(this.$zhTran('请选择转接业务员')));

							callback();
						},
						trigger: ['blur', 'change'],
					}]
				}
			}
		},

		computed: {},

		methods: {
			// 刷新订单数据 @Mixins【/src/mixins/order.js】内调用，请勿删除
			refreshOrderData() {
				this.$nextTick(() => {
					this.mescroll.resetUpScroll()
				})
			},

			// 上拉加载更多
			upCallback({
				num,
				size
			}) {
				apiCitySupplierSalemanList({
					csppl_id: this.csppl_id,
					mode: 1,
					page_no: num,
					page_size: size,
				}).then(({
					lists,
					page_size,
					count,
					extend
				}) => {
					if (num === 1) this.salemanList = []
					this.salemanList = [...this.salemanList, ...lists]
					this.salemanList = this.$zhTran(this.salemanList)
					this.mescroll.endSuccess(lists.length, count)
				}).catch(err => {
					this.mescroll.endErr()
				})
			},

			closePopup() {
				this.showVisible = false
				this.formModel = {
					mobile: '',
					del_sale: '',
					del_saleman: '',
					csppl_sale: '',
					csppl_saleman: this.$zhTran('修改客户所属业务员')
				}
			},
			newSaleman() {
				this.mode = 'add'
				this.showVisible = true
			},
			addSaleman() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						apiCitySupplierSalemanAdd({
							csppl_id: this.csppl_id,
							...this.formModel
						}).then(res => {
							this.$toast({
								title: this.$zhTran("新增成功"),
							});
							this.closePopup()
							this.mescroll.resetUpScroll()
						}).catch(err => {
							console.log(err)
						})
					} else {
						console.log('验证失败');
					}
				});
			},
			removeSale(row) {
				this.formModel.del_sale = row.id
				this.formModel.del_saleman = row.user_info.nickname
				this.mode = 'del'
				this.showVisible = true
			},
			chooseSaleman() {
				var that = this
				uni.navigateTo({
					url: "/bundle2/pages/citysupplier/choose_saleman",
					success(res) {
						res.eventChannel.emit("receiveData", {
							csppl_id: that.csppl_id,
							csppl_sale: that.formModel.csppl_sale,
							del_sale: that.formModel.del_sale,
							title: that.$zhTran('转接业务员'),
						});
					},
					events: {
						reSetData(nres) {
							console.log(nres)
							let res = that.$zhTran(nres)
							that.formModel.csppl_sale = res.value
							that.formModel.csppl_saleman = res.label
						}
					},
				});
			},
			delSaleman() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						apiCitySupplierSalemanDel({
							...this.formModel
						}).then(res => {
							this.$toast({
								title: this.$zhTran("离职转接成功"),
							});
							this.closePopup()
							this.mescroll.resetUpScroll()
						}).catch(err => {
							console.log(err)
						})
					} else {
						console.log('验证失败');
					}
				});
			}
		},
		mounted() {

			this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {
			const options = this.$Route.query
			console.log(options)
			this.csppl_id = options.csppl_id
			this.user_id = options.user_id
			this.is_leader = options.is_leader

			this.refreshOrderData()
			setTimeout(() => {}, 0.5 * 1000)
		},
		onUnload() {},
	}
</script>


<style lang="scss">
	page {
		height: 100%;
		padding: 0;
	}

	.order-list {
		height: 100%;
		display: flex;
		flex-direction: column;

		.order-item {
			flex: 1;
			min-height: 0;
		}
	}

	.order-contain {
		padding: 0 20rpx;
	}

	.order {
		padding: 0 20rpx;
		margin-top: 20rpx;
		border-radius: 5px;
		background-color: #FFFFFF;

		&-header {
			display: flex;
			align-items: center;
			padding: 20rpx;
			border-bottom: $-solid-border;

			.avatar {
				width: 80rpx;
				border-radius: 50%;
			}
		}

		&-main {
			padding: 20rpx;

			.box {
				margin-bottom: 10rpx;
				color: rgba(56, 56, 56, 1);
				font-size: 28rpx;

				text {
					color: rgba(64, 115, 250, 1);
				}
			}
		}
	}

	.saleman {

		&-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 100rpx;
			padding: 0 30rpx;
			font-weight: 500;
			font-size: $-font-size-md;
			background-color: #FFFFFF;
		}

		&-main {
			padding: 20rpx;
		}

		&-footer {
			padding: 0 20rpx env(safe-area-inset-bottom);
			padding-top: 20rpx;
			padding-bottom: 20rpx;
			background-color: rgba(248, 248, 250, 1);

			.btn {
				flex: 1;

				&--cancel {
					color: rgba(38, 38, 38, 1);
					width: 48%;
				}

				&--confirm {
					background-color: rgba(64, 115, 250, 1);
					width: 48%;
					color: #fff;
				}
			}
		}
	}

	.functions {
		position: relative;
		z-index: 999;
		left: 0;
		right: 0;
		bottom: 0;
		height: calc(100rpx + constant(safe-area-inset-bottom));
		height: calc(100rpx + env(safe-area-inset-bottom));
		padding: 0 36rpx constant(safe-area-inset-bottom) 36rpx;
		padding: 0 36rpx env(safe-area-inset-bottom) 36rpx;

		.btn-add {
			position: absolute;
			right: 50rpx;
			bottom: 80rpx;
		}
	}
</style>